<template>
   <div class="updateroom-container">
          <div class="updateroom-top-container">
              <el-page-header @back="goBack" content="歌手類型页面">
              </el-page-header>
          </div>
        <el-form  ref="form" status-icon   :model="form" label-width="80px">
        <el-form-item label="歌手名" prop="username">
          <el-input v-model="form.singername" style="width:95%"></el-input>
        </el-form-item>
        
         <el-form-item label="性別" prop="password">
          <el-input  v-model="form.gender" style="width:95%"></el-input>
        </el-form-item>

      <!--
         <el-form-item label="圖片" prop="password">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
        </el-form-item>
   -->

       
        <el-form-item label="birth" prop="password">
          <el-input  v-model="form.birth" style="width:95%"></el-input>
        </el-form-item>


        
          <el-form-item label="introduction" prop="password">
          <el-input  v-model="form.introduction" 
           type="textarea"
          style="width:95%">

          </el-input>
        </el-form-item>
        

     

        

        <div class="button-container">
          
            <el-button type="primary" @click="submit()" >提交</el-button>
          
        </div>
      </el-form>
       
    </div>
</template>

<script>
export default {
    name:'addUser',
    data() {
      return {
         choice:'新增用戶',
         IsOk:'',
         form: {
            singername: '',
            gender: '',
            birth:'',
            introduction:'',
          },
          dialogImageUrl: '',
          dialogVisible: false,
          value: '',

          fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
      }
    },
    methods: {
        async submit(){
          let that=this;
          //update....
          
         if(this.$route.query.do=='add'){
          //add
          console.log('add??');
          await this.$axios.get("http://localhost:8081/addSinger?name="+this.form.singername+"&gender="+this.form.gender+"&pic=xxx"+"&birth="+this.form.gender+"&introduction="+this.form.introduction)
            .then((result) => {
                console.log(result.data);
                that.$router.push({path:'/homepage/roomTypeInfo',query:{status:result.data}})
                //return;
            }).catch((err) => {
              
            });
           }
          else
          {
           await this.$axios.get("http://localhost:8081/updateSinger?id="+this.$route.query.id+'&name='+this.form.singername+"&gender="+this.form.gender+"&pic=xxx"+"&birth="+this.form.birth+"&introduction="+this.form.introduction)
            .then((result) => {
                console.log(result.data);

                that.$router.push({path:'/homepage/roomTypeInfo',query:{status:result.data}})
              
               
            }).catch((err) => {
              
            });
          }
        },
        goBack(){
          this.$router.push('/homepage/roomTypeInfo');
        },
        load(){
          //console.log(this.$route);
          if(this.$route.query)
          {
            this.form.singername=this.$route.query.name;
            this.form.gender=this.$route.query.gender;
            this.form.birth=this.$route.query.birth;
            this.form.introduction=this.$route.query.introduction
          }
        },

        //文件上傳...
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
    },
    mounted() {
      this.load();
    },

}
</script>

<style>
   .roomtype{
     float: left;
     position:absolute;
     left: 180px;
     line-height: 30px;
   }
   .updateroom-mid-container{
     padding: 40px;
     position: relative;
   }

   .updateroom-container{
     width: 60%;
     padding: 20px;
     
   }
   .updateroom-top-container{
     width: 100%;
     height: 50px;
     padding-left: 20px;
   }
   .el-textarea__inner{
     height: 200px;
   }
</style>